import { clsx } from 'clsx';

interface LoadingProps {
  size?: 'sm' | 'md' | 'lg';
  className?: string;
  text?: string;
}

export const Loading: React.FC<LoadingProps> = ({ size = 'md', className, text }) => {
  const sizeClasses = {
    sm: 'w-4 h-4 border-2',
    md: 'w-8 h-8 border-2',
    lg: 'w-12 h-12 border-3',
  };

  return (
    <div className={clsx('flex flex-col items-center justify-center', className)}>
      <div
        className={clsx(
          'animate-spin rounded-full border-primary-600 border-t-transparent',
          sizeClasses[size]
        )}
      />
      {text && <p className='mt-2 text-sm text-gray-600 animate-pulse'>{text}</p>}
    </div>
  );
};

export const LoadingFallback: React.FC = () => (
  <div className='flex items-center justify-center min-h-[200px]'>
    <Loading size='lg' text='加载中...' />
  </div>
);

export const PageLoading: React.FC = () => (
  <div className='flex items-center justify-center min-h-screen'>
    <Loading size='lg' text='页面加载中...' />
  </div>
);

export default Loading;
